<template>
  <h1>App...</h1>
  <!-- 路由跳转两种方式 -->
  <!-- 声明式导航 -->
  <router-link to="/home">Home</router-link>
  <router-link
    :to="{
      path: '/home',
    }"
  >
    Home
  </router-link>
  <!-- 编程式导航 -->
  <el-button @click="goAbout">About</el-button>
  <el-button @click="goDetail">Detail</el-button>

  <!-- 
    router-view 
      如果没有传插槽，正常渲染路由组件
        如果当前路径是/home，就要渲染Home组件
      如果传入插槽，传入的插槽就是要渲染的内容

      v-slot="{ Component }"
      它是一个默认插槽，
      同时使用了作用域插槽，router-view组件内部给当前组件App传递了一个数据：Component

      Component。就是router-view原来打算要渲染的路由组件
        Component在路径是/home的情况下，Component就是Home组件

    component是Vue框架提供的内置元素，
      这个元素本身啥也不渲染，元素上有一个is属性，is属性的值是啥，就渲染啥
   -->
  <router-view>
    <template v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </template>
  </router-view>
</template>

<script lang="ts" setup>
/*
  前端路由：

  1. 作用：用来开发单页面应用（SPA）

  2. 两种模式：hash 和 history
    他们的区别?
      hash路径带#（更难看），history没有（更美观）
      hash兼容性更好（ie8），history兼容性更差(ie10)
      hash原理不一样（hashchange事件和window.location.hash）, history(onpopstate, pushState/replaceState)
    前端路由的原理：
      （hashchange事件和window.location.hash）
       (onpopstate, pushState/replaceState)

  3. 配置

  4. 组件
    router-link 路由跳转
    router-view 渲染对应的路由组件

  5. 路由跳转两种方式
    声明式导航
      router-link
    编程式导航 
      router.push/replace/back()

  6. 路由传参
    params
      渲染xx详情页面，参数一般都是id
    query
      普通数据都是使用query传递
    meta
      配置路由配置meta参数（往往写死）

  7. 缓存路由组件
    keep-alive

  8. 路由懒加载
*/
import { useRouter } from "vue-router";

const router = useRouter();

const goAbout = () => {
  // 编程式导航
  // push / replace / go / back / forward
  // router.push("/about");
  // router.push({
  //   path: "/about",
  // });
  router.push({
    name: "About",
    query: {
      name: "jack",
      age: 18,
    },
  });
};

const goDetail = () => {
  // router.push({
  //   name: "Detail", // 对象形式，params参数必须使用name不能用path
  //   params: {
  //     id: 123,
  //   },
  // });
  router.push("/detail/123");
};
</script>

<style scoped></style>
